<template>
	<view :class="mobile == 'm' ? 'login_box_m' : 'login_box_pc'">
		<u-form ref="login_form" :model="form" class="login_form" label-width="100rpx">
			<u-form-item style="text-align: center; margin-top: -25%; padding-right: 5%">
				<view style="font-size: 39rpx; font-weight: 500;">登 录</view>
			</u-form-item>
			<u-form-item label="账号" prop="phone" class="input_style">
				<u-input type="number" placeholder="请输入手机号" ref="phone_target" v-model="form.phone" :border="true">
				</u-input>
			</u-form-item>

			<u-form-item label="密码" prop="password" class="input_style">
				<u-input type="password" placeholder="请输入密码" v-model="form.password" :clearable="false"
					:password-icon="true" :border="true"></u-input>
			</u-form-item>
			<u-form-item>
				<u-button type="primary" @click="submitForm('login_form')" style="width: 100% ;margin-top:10%">登 录
				</u-button>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: "",
					password: "",
					// phone: "13535562128",
					// password: "123456",
				},
				rules: {
					phone: [{
							required: true,
							message: "请输入账号",
							trigger: "blur,change"
						},
						{
							min: 11,
							max: 15,
							message: "账号需要在 11 到 15 个字符",
							trigger: "blur,change",
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur,change"
						},
						{
							min: 3,
							max: 15,
							message: "密码需要在 3 到 15 个字符",
							trigger: "blur,change",
						},
					],
				},
				mobile: "m",
				btn_stats: {},
				// 登录时验证账号密码是否正确的结果状态
				login_state: false,
				this_phone: '',
				token: ''
			};
		},
		onReady() {
			this.$refs.login_form.setRules(this.rules)
		},
		onHide() {
			// console.log('hede')
			// if (!this.token) {
			// 	uni.navigateTo({
			// 		url: "../index/index"
			// 	})
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: "请登录"
			// 	})
			// }
		},
		onUnload() {
			console.log('unload')
		},
		created() {
			this.this_phone = this.form.phone
			// 查看本地是否有手机号和密码
			uni.getStorageSync('phone') ? this.form.phone = uni.getStorageSync('phone') : null
			uni.getStorageSync('password') ? this.form.password = uni.getStorageSync('password') : null
		},
		methods: {
			submitForm(login_form) {
				if (this.btn_stats.login) {
					return
				}
				// 判断是否通过校验
				this.$refs.login_form.validate(valid => {
					this.login_state = valid
				});
				if (!this.login_state) {
					return uni.showToast({
						icon: 'none',
						title: "账号密码格式不正确"
					})
				}
				uni.showLoading({
					title: '正在登录...'
				});
				// 往本地存储手机号和密码
				uni.getStorageSync('phone') ? null :
					uni.setStorage({
						key: "phone",
						data: this.form.phone
					})
				uni.getStorageSync('password') ? null :
					uni.setStorage({
						key: "password",
						data: this.form.password
					})
				this.btn_stats.login = true
				const then = this
				const urlPath = "login/alpha";
				uni.request({
					method: 'POST',
					url: this.$serverURL + urlPath,
					// url: 'https://api.bingce.com:8091/login/alpha',
					// url: 'http://api.bingce.com:8091/login/alpha',
					// url: 'https://192.168.31.70:8080/login/alpha',
					data: this.form,
					header: {},
					success(res) {
						console.log(res)
						// 优化触发
						if (res.data.result == 2) {
							// 提示 登录密码错误
							uni.showToast({
								icon: 'none',
								title: "登录密码错误"
							})
						} else if (res.data.result == 3) {
							// 提示 未查询到用户名
							uni.showToast({
								icon: 'none',
								title: "登录密码错误"
							})
						} else if (res.data.result == 0) {
							console.log(res)
							// 提示 登录成功
							uni.showToast({
								title: "登录成功"
							})
							uni.setStorage({
								key: "phone",
								data: then.form.phone
							})
							then.token = res.data.token
							uni.setStorage({
								key: "token",
								data: res.data.token
							})
							// 跳转 query
							uni.navigateTo({
								url: "../query/query"
							})
						}else{
							
						}
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							title: '登录失败',
							icon: 'none',
							duration: 2000
						});
					},
					complete(res) {
						setTimeout(() => {
							then.btn_stats.login = false
						}, 1000)
					}
				})
			},
		},
	};
</script>

<style>
	.login_box_pc {
		width: 30%;
		height: 50%;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 2%;
		margin: 10% auto;
	}

	.login_box_m {
		width: 90%;
		height: 50%;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 2%;
		padding: 2%;
		margin: 25% auto;
	}

	.login_form {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 15px;
		padding-bottom: 50rpx;
	}
</style>
